<template>
	<view>
		<view class="evaluate_box" v-if="commentsList.length>0">
			<view class="evaluate_block">
				<view class="left">
					<text>{{extraData.score}}</text>
					<view class="star">
						<uni-rate :touchable="false" :readonly='true' :size="18" :value="extraData.score" />
					</view>
				</view>
				<view class="centre_line">

				</view>
				<view class="rigth">
					<view class="rigth_list">
						<text class="progess_title">整洁度：</text>
						<view class="progess">
							<view class="progess_line" :style="{'width':`${extraData.cleanRate}%`}">

							</view>
						</view>
						<text class="progess_value">{{extraData.cleanRate}}%</text>
					</view>
					<view class="rigth_list">
						<text class="progess_title">服务：</text>
						<view class="progess">
							<view class="progess_line" :style="{'width':`${extraData.serviceRate}%`}">

							</view>
						</view>
						<text class="progess_value">{{extraData.serviceRate}}%</text>
					</view>
				</view>
			</view>
			<!-- <scroll-view scroll-y="true" class="scroll_view"  @scrolltolower='scrolltolower'> -->
			<view class="evaluate" v-for="(item,index) in commentsList" :key="index">
				<view class="evaluate_top">
					<view class="photo_name_time">
						<image src="/static/nameIcon/default.svg" mode="" class="photo"></image>
						<view class="name_time">
							<view class="name">
								{{item.nickName}}
							</view>
							<text class="time">
								{{item.createTime}}
							</text>
						</view>
					</view>
					<view class="progess_value_box">
						<uni-rate :touchable="false" :readonly='true' :size="14" :value="item.score" />
						<!-- <view class="progess_box">
		
						</view> -->
						<view class="progess_value">
							{{item.score}}
						</view>
					</view>
				</view>
				<view class="evaluate_des">
					<view class="des_title">{{item.content}}</view>

				</view>
			</view>
			<!-- </scroll-view> -->
		</view>
		<view class="main dis" style="z-index: 9999;height: 80vh;" v-else>
			<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/noData.png" mode="aspectFit" style="width: 200rpx;height: 200rpx;"></image>
				<text>暂无数据</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		allComments
	} from '@/pagesA/evaluate/js/api.js'
	import {
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		ref,
		onMounted,
		reactive,
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	onMounted(() => {
		// getAllComments()
	})
	const extraData = ref({})
	const commentsList = ref([])
	const paramsData = reactive({
		pageNum: 1,
		pageSize: 10,
		houseId: '',
	})
	const isReach = ref(true)
	const getAllComments = async () => {
		let res = await allComments(paramsData)
		extraData.value = res.data.data.extra
		console.log('sdshjffhgdh----',extraData.value)
		let list = res.data.data.list
		if(paramsData.pageNum == 1){
			commentsList.value = list
		}else{
			commentsList.value = commentsList.value.concat(list)
		}
		if(list.length<10) isReach.value = false
		// console.log('res====333', res.data.data.list)
	}
	// const scrolltolower = ()=>{
	// 	console.log('触底拉～')
	// 	paramsData.pageNum ++
	// 	getAllComments()
	// }
	onReachBottom(() => {
		// console.log('上拉触底')
		if (!isReach.value) return
		paramsData.pageNum ++
		getAllComments()
	})
	onLoad((options)=>{
		console.log(options,'页面携带')
		paramsData.houseId = options.id
		getAllComments()
	})
</script>
<style>
	page {
		background-color: #F6F6F6 !important;
	}
</style>
<style lang="less" scoped>
	.scroll_view{
		height: calc(100vh - 200rpx);
	}
	.evaluate_box {
		// margin-top: 16rpx;
		margin-bottom: 30rpx;
		// background: #ffffff;
		// padding: 30rpx 0;

		.evaluate_block {
			background: #ffffff;
			// margin-top: 30rpx;
			// width: 100%;
			padding: 28rpx 30rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 6rpx 0px rgba(0, 0, 0, 0.11);
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 30rpx 30rpx 0 30rpx;

			.left {
				font-family: Arial-BoldMT;
				font-size: 50rpx;
				color: #EE7930;
				text-align: right;
				font-weight: 700;
				width: 49%;
				display: flex;
				align-items: center;

				.star {
					width: 100rpx;
				}
			}

			.centre_line {
				width: 1rpx;
				background: #eeeeee;
				height: 60rpx;
				margin: 0 40rpx;
			}

			.rigth {
				.rigth_list {
					display: flex;
					align-items: center;
					margin-top: 8rpx;

					.progess_title {
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #333333;
						line-height: 30rpx;
						font-weight: 400;
						width: 96rpx;

					}

					.progess {
						background: #ececec 100%;
						width: 90rpx;
						height: 6rpx;
						.progess_line {
							background: #F8D648;
							width: 90rpx;
							height: 6rpx;
						}
					}

					.progess_value {
						margin-left: 8rpx;
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #EE7930;
						line-height: 30rpx;
						font-weight: 400;
					}
				}
			}
		}

		.evaluate {
			background: #ffffff;
			padding: 30rpx;
			margin-top: 30rpx;

			.evaluate_top {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.photo_name_time {
					display: flex;
					align-items: center;

					.photo {
						width: 60rpx;
						height: 60rpx;
						border-radius: 6rpx;
						margin-right: 16rpx;
					}

					.name_time {
						display: flex;
						flex-direction: column;

						.name {
							font-family: PingFangSC-Semibold;
							font-size: 26rpx;
							color: #000000;
							letter-spacing: 0;
							// line-height: 30rpx;
							font-weight: 600;
						}

						.time {
							font-family: PingFangSC-Regular;
							font-size: 20rpx;
							color: #666666;
							letter-spacing: 0;
							// line-height: 20rpx;
							font-weight: 400;
						}
					}

				}

				.progess_value_box {
					display: flex;
					align-items: center;

					.progess_box {
						width: 140rpx;
						height: 30rpx;
						border: 1rpx solid red;
						margin-right: 16rpx;
					}

					.progess_value {
						font-family: PingFangSC-Regular;
						font-size: 26rpx;
						color: #EE7930;
						text-align: right;
						line-height: 30rpx;
						font-weight: 400;
					}
				}
			}

			.evaluate_des {
				margin-top: 12rpx;

				.des_title {
					margin-top: 8rpx;
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: #666666;
					letter-spacing: 0;
					// line-height: 42rpx;
					font-weight: 400;
				}
			}
		}
	}
</style>